<template>
    <div class="contact web-inner">
        <div class="common-title">
            <span class="title-left">聯絡我們</span>
        </div>
        <div class="main-top">
            <div class="left">
                <div class="left-item-item">
                    <img class="left-item" src="../../static/img/logo.png" alt="">
                </div>
                <div class="left-item">
                    <img src="../../static/img/btn1.png" alt="">
                    <img src="../../static/img/btn2.png" alt="">
                    <img src="../../static/img/btn3.png" alt="">
                </div>
            </div>
            <div class="right">
                <div class="item">
                    <span class="title">
                        聯絡時間：
                    </span>
                    <span >
                        週一至週五
                    </span>
                    <span>
                        <div>上午09:00-12:00</div>
                        <div>下午13:00-18:00</div>
                    </span>
                </div>
                <div class="item">
                    <span class="title">
                        服務電話：
                    </span>
                    <span >
                        02-28883858
                    </span>
                </div>
                <div class="item">
                    <span class="title">
                        傳真專線：
                    </span>
                    <span >
                        02-88615556
                    </span>
                </div>
                <div class="item">
                    <span class="title">
                        電子信箱：
                    </span>
                    <span >
                        51KDTW＠gmail.com
                    </span>
                </div>
                <div class="item">
                    <span class="title">
                        聯絡地址：
                    </span>
                    <span >
                        台北市士林區文林路338號4F
                    </span>
                </div>
                <div class="item">
                    <span class="title">
                        <a href="http://nav.cx/hXKkUnJ">
                             <img src="../../static/img/line.png" alt="">
                        </a>
                    </span>
                    <span class="line">
                        <div>LINE線上咨詢</div>
                        <div>ID@94luhbim</div>
                    </span>
                </div>
            </div>
        </div>
        <div class="main-form">
            <div class="title">
                歡迎留下您的需求與咨詢，將會有專人聯繫您。
            </div>
            <div class="form">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="聯絡人" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性別" prop="sex">
                        <el-radio-group v-model="ruleForm.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="電話" prop="tel">
                        <el-input type="number"  v-model="ruleForm.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="手機" prop="m_phone">
                        <el-input type="number" v-model="ruleForm.m_phone"></el-input>
                    </el-form-item>
                    <el-form-item label="E-mail" prop="email">
                        <el-input v-model="ruleForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="其他備註" prop="desc">
                        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <el-form-item label="驗證碼" prop="phrase">
                        <img  style="height: 40px;vertical-align: middle;cursor: pointer" :src="imgUrl1" alt="">

                        <el-input style="display: inline-block;width: 200px;margin: 10px;" v-model="ruleForm.phrase"/>
                        <a @click="refresh" href="javascript:;">看不清？點擊刷新</a>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
  import qs from 'qs';
  export default {
    name: "contact",
    data() {
      var checkPhone = (rule, value, callback) => {
        let mobilePatternTW = /^(\+886\s)?[0]{1}[9]{1}\d{8}$/;
        if(mobilePatternTW.test(value)){
          callback();
        }else{
          callback(new Error('請輸入正確的電話號碼'));
        }
      };
      var checkEmail=(rule, value, callback) => {
        var temp = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if(value===""){
          callback(new Error('必填'));
        }
        if(!temp.test(value)){
          callback(new Error('請輸入正確的郵箱'));
        }
        callback();
      };
      return {
        ruleForm:{
          name:"",
          sex:"",
          tel:"",
          m_phone:"",
          email:"",
          desc:"",
        },
        rules: {
          name: [
            { required: true, message: '必填', trigger: 'blur' },
          ],
          sex: [
            { required: true, message: '必填', trigger: 'change' }
          ],
          m_phone: [
            { required: true,message: '必填',validator:checkPhone, trigger: 'blur' }
          ],
          email: [
            { required: true,validator:checkEmail, trigger: 'blur' }
          ],
          phrase: [
            { required: true,message: '必填', trigger: 'blur' }
          ],
        },
        imgUrl1:"/webroot/session.php",
      }
    },
    methods: {
      refresh() {
        this.imgUrl1="/webroot/session.php?"+new Date().getTime()
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.sendData()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      sendData() {
        let data = Object.assign({},this.ruleForm);
        this.$http({
          method:"post",
          url:this.API.apply_contact_us,
          data:qs.stringify(data),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          withCredentials:true
        }).then((res) => {
          this.refresh()
          if(res.data[0].code==="101"){
            this.resetForm("ruleForm");
            this.$alert(this.formTips, '成功', {
              confirmButtonText: '确定',
            });
          }else{
            this.$alert(res.data[1].desc, '提示', {
              confirmButtonText: '确定',
            });
          }
        })
      },
    }
  }
</script>

<style scoped lang="less">
    @import "../style/base";
    .contact{
        margin: 0 auto;
        padding: 50px 80px;
        box-sizing: border-box;
        background-color: #ffffff;
        margin-top: 6px;
        .main-top{
            width: 100%;
            display: flex;
            flex-direction: row;
            padding-top: 30px;
            .left{
                flex: 1;
                display: flex;
                flex-direction: column;
                text-align: center;
                .left-item-item{
                    width: 100%;
                    text-align: center;
                    margin: 85px 0;
                }
                .left-item-item img{
                    width: 50%;
                    margin: 0 auto;
                }
                .left-item{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    padding: 0 50px;
                    img{
                        width: 70px;
                        height: 70px;
                    }
                }
            }
            .right{
                flex: 1;
                .item{
                    display: flex;
                    flex-direction: row;
                    height: 50px;
                    .line{
                        div{
                            &:first-child{
                                font-weight: bold;
                            }
                        }
                    }
                    span{
                        font-size: 14px;
                        color: #000000;
                        margin-right: 10px;
                        img{
                            cursor: pointer;
                            width: 100px;
                        }
                    }
                    .title{
                        font-weight: bold;
                    }
                }
            }
        }
        .main-form{
            .title{
               font-size: 14px;
                margin: 20px 0;
            }
        }
    }

</style>
<style lang="less">
    .contact{
        .el-input,.el-textarea{
            width: 300px;
        }
    }
</style>